/**
 * Copyright (C) <2023> <Boundivore> <boundivore@foxmail.com>
 * <p>
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the Apache License, Version 2.0
 * as published by the Apache Software Foundation.
 * <p>
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * Apache License, Version 2.0 for more details.
 * <p>
 * You should have received a copy of the Apache License, Version 2.0
 * along with this program; if not, you can obtain a copy at
 * http://www.apache.org/licenses/LICENSE-2.0.
 */
/**
 * 新建集群
 * @author Tracy
 */
import { useEffect, useState } from 'react';
import { Button, Form, Input, Select, List, Tabs, Result, Row, Col, Card, Flex } from 'antd';
import { useTranslation } from 'react-i18next';
import RequestHttp from '@/api';
import APIConfig from '@/api/config';
import useStore from '@/store/store';
import useNavigater from '@/hooks/useNavigater';
import { ClusterType, ServiceItemType } from '@/api/interface';
import ContainerCard from '@/components/containerCard';

const { Option } = Select;
const layout = {
	labelCol: { span: 6 },
	wrapperCol: { span: 18 }
};

const CreateCluster: React.FC = () => {
	const { navigateToClusterList, navigateToNodeInit } = useNavigater();
	const [success, setSuccess] = useState(false);
	const [DLCVersion] = useState('');
	const [serviceList, setServiceList] = useState<ServiceItemType[]>([]);
	const [clusterList, setClusterList] = useState<ClusterType[]>([]);
	const [showRelativeId, setShowRelativeId] = useState(false);
	const { jobClusterId, setJobClusterId } = useStore();
	const { t } = useTranslation();
	const [form] = Form.useForm();
	const handleOk = async () => {
		form
			.validateFields()
			.then(async (values: ClusterType) => {
				const api = APIConfig.createCluster;
				const data = await RequestHttp.post(api, values);
				if (data.Code === '00000') {
					setSuccess(true);
					setJobClusterId(data.Data.ClusterId);
				}
			})
			.catch(err => {
				//使用 form.validateFields()方式触发验证，只能通过这种方式实现提交失败自动滚动到第一个错误字段
				form.scrollToField(err.errorFields[0].name[0]);
			});
	};
	const getDLCVersion = async () => {
		const api = APIConfig.getDLCVersion;
		const {
			Code,
			Data: { DlcVersion, DlcServiceSummaryList }
		} = await RequestHttp.get(api);
		if (Code === '00000') {
			form.setFieldsValue({ DlcVersion: DlcVersion });
			const processedData = DlcServiceSummaryList.reduce((result: ServiceItemType, item: ServiceItemType) => {
				const serviceType = item.ServiceType;
				const serviceName = item.ServiceName;
				const version = item.Version;
				const desc = item.Desc;
				const existingItem = result.find((obj: ServiceItemType) => obj.ServiceType === serviceType);

				if (existingItem) {
					existingItem.Service.push({ ServiceName: serviceName, Version: version, Desc: desc });
				} else {
					result.push({
						ServiceType: serviceType,
						Service: [{ ServiceName: serviceName, Version: version, Desc: desc }]
					});
				}

				return result;
			}, []);
			setServiceList(processedData);
		}
	};
	const getClusterListByClusterType = async () => {
		const api = APIConfig.getClusterListByClusterType;
		const {
			Code,
			Data: { ClusterList }
		} = await RequestHttp.get(api, { params: { ClusterType: 'MIXED' } });
		if (Code === '00000') {
			setClusterList(ClusterList);
		}
		console.log(clusterList);
	};
	const handleTypeChange = (type: string) => {
		setShowRelativeId(type === 'COMPUTE');
	};
	useEffect(() => {
		getDLCVersion();
		getClusterListByClusterType();
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, []);
	return (
		<ContainerCard>
			{!success ? (
				<Row>
					<Col span={10}>
						<Card title={t('cluster.defineCluster')} bordered={false} className="no-title-border shadow-none pr-0">
							<Form
								form={form}
								name="basic"
								{...layout}
								initialValues={{ remember: true, DlcVersion: DLCVersion }}
								autoComplete="off"
								scrollToFirstError
							>
								<Form.Item
									label={t('cluster.name')}
									name="ClusterName"
									rules={[{ required: true, pattern: /^[a-zA-Z0-9-]+$/, message: `${t('cluster.nameCheck')}` }]}
								>
									<Input className="w-[80%]" />
								</Form.Item>
								<Form.Item
									label={t('cluster.type')}
									name="ClusterType"
									rules={[{ required: true, message: `${t('cluster.typeCheck')}` }]}
								>
									<Select className="w-[80%]" onChange={value => handleTypeChange(value)} allowClear>
										<Option key="MIXED" value="MIXED">
											{t('cluster.mixed')}
										</Option>
										<Option key="COMPUTE" value="COMPUTE">
											{t('cluster.compute')}
										</Option>
									</Select>
								</Form.Item>
								{showRelativeId ? (
									<Form.Item
										label={t('cluster.relativeClusterId')}
										name="RelativeClusterId"
										rules={[{ required: true, message: `${t('cluster.idCheck')}` }]}
									>
										<Select className="w-[80%]" allowClear>
											{clusterList.map((clusterItem: ClusterType) => {
												return (
													<Option key={clusterItem.ClusterId} value={clusterItem.ClusterId}>
														{`${clusterItem.ClusterName} (${clusterItem.ClusterId})`}
													</Option>
												);
											})}
										</Select>
									</Form.Item>
								) : null}
								<Form.Item
									label={t('cluster.description')}
									name="ClusterDesc"
									rules={[{ required: true, message: `${t('cluster.desCheck')}` }]}
								>
									<Input className="w-[80%]" />
								</Form.Item>

								<Form.Item
									label={t('cluster.dlcVersion')}
									//rules={[{ required: true, message: `${t('cluster.desCheck')}` }]}
								>
									<Flex align="top">
										<Form.Item
											className="w-[80%] m-0"
											name="DlcVersion"
											rules={[{ required: true, message: `${t('cluster.desCheck')}` }]}
										>
											<Input disabled />
										</Form.Item>
										<svg width="20%" height="32" xmlns="http://www.w3.org/2000/svg">
											<line x1="0" y1="16" x2="200" y2="16" stroke="#f0f0f0" strokeWidth="2" />
											{/* <polygon points="100,20 90,15 90,25" fill="#51c2fe" /> */}
										</svg>
									</Flex>
								</Form.Item>
								<Form.Item wrapperCol={{ offset: 6, span: 18 }}>
									<Button type="primary" size={'large'} onClick={handleOk}>
										{t('cluster.create')}
									</Button>
								</Form.Item>
							</Form>
						</Card>
					</Col>
					<Col span={14}>
						<Card title={t('cluster.serviceOverview')} bordered={true} className="shadow-none">
							<Tabs
								className="pl-[50px]"
								items={serviceList.map(service => {
									return {
										key: service.ServiceType,
										label: t(service.ServiceType.toLowerCase()),
										children: (
											<List
												size="small"
												itemLayout="horizontal"
												dataSource={service.Service}
												renderItem={(item: ServiceItemType) => (
													<List.Item>
														<List.Item.Meta
															title={
																<div>
																	<p className="flex items-center">
																		<img src={`/service_logo/${item.ServiceName.toLowerCase()}.svg`} width="16" height="16" />
																		<span className="pl-[5px]">
																			{item.ServiceName}-V{item.Version}
																		</span>
																	</p>
																	<p className="text-stone-500">{item.Desc}</p>
																</div>
															}
														/>
													</List.Item>
												)}
											/>
										)
									};
								})}
							/>
						</Card>
					</Col>
				</Row>
			) : (
				<div style={{ fontSize: '30px', textAlign: 'center' }}>
					{/* <Trans i18nKey="cluster.createSucc">
							This should be a <a href={`/node/init?id=${jobClusterId}`}>link</a>
						</Trans> */}
					<Result
						status="success"
						title={t('cluster.createSucc')}
						extra={[
							<Button key="continue" type="primary" onClick={() => navigateToNodeInit(jobClusterId)}>
								{t('cluster.continue')}
							</Button>,
							<Button key="backToList" type="primary" onClick={navigateToClusterList}>
								{t('cluster.backToList')}
							</Button>
						]}
					/>
				</div>
			)}
		</ContainerCard>
	);
};

export default CreateCluster;
